import React, { useEffect, useState } from 'react';
import Header from '../../components/Header'
import { useParams, useLocation, useNavigate } from 'react-router';
import {LeftOutline} from 'antd-mobile-icons'
import './index.scss'
import { getDetail } from '../../api/detail';
import { Swiper, Image,ImageViewer, Skeleton, Button } from 'antd-mobile';
const Index = () => {

  // useParams 是用来接收通过 url 传递的参数
  const params = useParams()
  // useLocation 获取路由信息用的，其中也可以获取到通过 state 传递参数
  const location = useLocation()

  // useNavigate 用来做页面跳转用的
  const navigate = useNavigate()

  // console.log('接收1：',params);
  // console.log('接收2：',location);

  // const [pro变量名，setPro修改变量的方法] = useState()
  // pro 是具备响应式的状态，setPro是用来修改 pro 值用的函数
  const [pro, setPro] = useState(null)

  // 获取详情页面的所有数据
  useEffect(()=>{
    getDetail(params.proid).then(res => {
      console.log(res);
      // 将一个字符串通过 , 拆分为数组
      res.data.banners = res.data.banners[0].split(',')

      // 记录当前数据，然后在页面中进行展示即可
      setTimeout(() => {
        setPro(res.data)
      }, 1000);

    })
  }, [params.proid])

  // 是否显示图片预览
  // visible 是一个布尔值，setVisible 修改 visible 值的函数
  const [visible,setVisible] = useState(false)

  return (
    <div className='box'>
          <Header title='详情' backBtn={<LeftOutline onClick={()=>{
            navigate(-1)
          }} className='backBtn' />} />
          <div className='content'>

            {pro ? (
              <>
              <Swiper style={{height: 350}} autoplay loop>
              {pro.banners.map((item,index) => {
                return (<Swiper.Item onClick={()=>{
                  // 当点击轮播图中的图片的时候需要设置为 true,让图片预览显示出来
                  setVisible(true)
                }} key={item + index}>
                  <Image style={{height: 350}} src={item} />
                </Swiper.Item>)
              })}
            </Swiper>
            <ImageViewer.Multi visible={visible} images={pro.banners} onClose={()=>{
              // 点击空白处关闭图片预览
              setVisible(false)
            }} />

            <div className='detail_main'>
              <h2> {pro.proname} </h2>
              <p> 价格：<span style={{color: 'red'}}>{pro.originprice}</span> </p>
              <p> 品牌： {pro.brand} </p>
              <p> 类型： {pro.category} </p>
              <p> 描述： {pro.desc} </p>
            </div>

              </>
            ) : (<>
            {/* 骨架屏 */}
            <Skeleton.Title />
            <Skeleton.Paragraph />
            <Skeleton.Title />
            <Skeleton.Paragraph />
            <Skeleton.Title />
            <Skeleton.Paragraph />
            <Skeleton.Title />
            <Skeleton.Paragraph />
            </>)}


              {/* 加入购物车，客服按钮的创建 */}
            <div className='detail_footer'>
              <Button size='mini' color='primary'> 加入购物车 </Button>
              <Button size='mini' color='success'> 联系客服 </Button>
              <span>￥ 199.99</span>
            </div>
          </div>
        </div>
  );
};

export default Index;
